<template>
  <div class="play">
    <!-- 推荐歌单页面 -->
    <tip :tip="'推荐歌单'"></tip>
    <div class="playbox">
      <playlist v-for="item in msg" :key="item.id" :msg="item"></playlist>
    </div>
    <!-- 最新音乐页面 -->
    <tip :tip="'最新音乐'"></tip>
    <!-- {{msg[0].coverImgUrl}} -->
    <newsong
      v-for="(item,index) in music"
      :key="item.id"
      :music="item"
      @click.native.stop="getlist(item,index)"
    ></newsong>
  </div>
</template>

<script>
import tip from "@com/resCom/tip.vue";
import playlist from "@com/resCom/playlist.vue";
import newsong from "@com/resCom/newsong.vue";
import { api } from "../../assets/http/api";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";

export default {
  name: "rec",
  components: {
    tip,
    playlist,
    newsong
  },
  computed: {
    ...mapGetters(["msg", "music", "newurl"])
  },
  data() {
    return {
      open: true,
      idx: []
    };
  },
  methods: {
    ...mapMutations(["getUrl","setTime"]),
    // 点击播放最新音乐的歌曲
    getlist(item, index) {
      this.$store.commit("setMusic", true)
      // 点击两次不能重复,第二次进入播放页面
      this.idx.push(index);
      if (this.idx.length == 2) {
        if (this.idx[0] != this.idx[1]) {
          this.open = true;
          this.idx = [];
        } else if (this.idx[0] == this.idx[1]) {
          this.open = false;
          this.idx = [];
        }
      }
      // 如果第一次点击和第二次点击的歌曲不同
      if (this.open) {
        this.$axios(api.playmusic + item.id).then(res => {
          // 字段处理
          let newitem = {};
          newitem.src = res.data.data[0].url;
          newitem.artist = item.name;
          newitem.title = item.song.artists[0].name;
          newitem.pic = item.picUrl;
          newitem.id = item.id;
          this.getUrl(newitem);
        });
      } else if (!this.open) {
        // 如果第一次点击和第二次点击的歌曲相同
        this.$store.commit("setMusic", false);
          this.$router.push({
            name: "detail"
          });
      }
    },
  }
};
</script>
<style lang="scss">
.playbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.play {
  // padding-bottom: 66px;
}
</style>